<template>
  <div class="search">
    <el-tree
    ref='treeForm'
  :data="data"
  show-checkbox
  node-key='id'
   @node-expand='getFn'
   @node-collapse='collFn'
  :expand-on-click-node='true'
:check-strictly='true'
 @check-change="handleCheckChange"
  :check-on-click-node='true'
  :props="defaultProps">
</el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [{
        id: 1,
        label: '2',
        children: [{
          id: 11,
          label: '1'
        }]
      }, {
        id: 2,
        label: '222',
        children: [{
          id: 12,
          label: '1'
        }, {
          id: 13,
          label: '2'
        }]
      }, {
        id: 3,
        label: '中国',
        children: [{
          id: 14,
          label: '1'
        }, {
          id: 15,
          label: '2'
        }]
      }, {
        id: 4,
        label: '亚洲',
        children: [{
          id: 16,
          label: '1'
        }, {
          id: 17,
          label: '2'
        }]
      }, {
        id: 5,
        label: '台军装备',
        children: [{
          id: 18,
          label: '1'
        }, {
          id: 19,
          label: '2'
        }]
      }, {
        id: 6,
        label: '美军装备',
        children: [{
          id: 20,
          label: '1'
        }, {
          id: 21,
          label: '2'
        }]
      }, {
        id: 7,
        label: '美国',
        children: [{
          id: 22,
          label: '1'
        }, {
          id: 23,
          label: '2'
        }]
      }, {
        id: 8,
        label: '蒙古国装备',
        children: [{
          id: 24,
          label: '1'
        }, {
          id: 25,
          label: '2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 点击节点
    getFn (value) {
      if (!value.children) return
      this.$store.commit('setOne', value.label)
      // console.log('我点击了节点')
    },
    collFn (a, b, c) {
      // console.log(222)
      // console.log(this.$store.state.one)
      // console.log('关闭节点')
      this.$store.commit('setOne', '')
      // console.log(this.$store.state.one)
    },
    handleCheckChange (a, b, c) {
      // 判断节点是否勾选
      if (b) {
        // console.log(a)
        this.$refs.treeForm.setCheckedKeys([]) // 删除所有选中节点
        this.$refs.treeForm.setCheckedNodes([a]) // 选中已选中节点
      }
    }
  }
}
</script>

<style>
.search {
  display: flex;
      /* width: 300px; */
      flex: 1;
      height: 350px;
      /* opacity: 1; */
      /* background-color: #8df; */
    }
    .el-tree {
      flex:1;
      /* width: 100%;
      height: 100%; */
    position: relative;
    cursor: default;
    background: #FFF;
    color: #606266;
    background-color: skyblue;
}
</style>
